<template>
	<view class="container">
		<view class="header" @tap="progress(dataGet.info.id)">
			<view class="lf lf-between">
				<view>
					<view class="header_title" >{{filterStatusText(dataGet.info.status)}}</view>
					<view class="header_tips">{{dataGet.info.loginUserIdentity==1?filterTopText(dataGet.info.status):filterTopText1(dataGet.info.status)}}</view>
					<view class="header_tips xjs-mt-12" v-if="(dataGet.info.status==1||dataGet.info.status==5)&&dataGet.info.user?.id==userInfo.id">{{filterTopText2(dataGet.info.status)}}</view>
				</view>
				<uni-icons type="right" color="#ffffff" size="24"></uni-icons>
			</view>
			<view v-if="dataGet.info.status==4" class="xjs-mt-10">
				<view class="header_tips text-word">{{dataGet.applyStudioProgressVos.remark}}</view>
				<view class="header_tips text-word xjs-mt-10 xjs-mb-10" v-if="dataGet.info.applicationInfoReasonFlag=='0'">申请信息不通过：{{dataGet.applyStudioProgressVos.applicationInfoReason}}</view>
				<view class="header_tips text-word" v-if="dataGet.info.payInfoReasonFlag=='0'">打款信息不通过：{{dataGet.applyStudioProgressVos.payInfoReason}}</view>
			</view>
			<view v-if="dataGet.info.status==2" class="xjs-mt-10">
				<view class="header_tips text-word">原因：{{dataGet.info.reason}}</view>
				<view class="header_img_list" v-if="dataGet.reasonPic">
					<image @tap="preview(dataGet.reasonPic,index)" v-for="(item,index) in dataGet.reasonPic" :key="index" class="header_img" :src="item"></image>
				</view>
			</view>
			
		</view>
		<view class="content">
			<!-- <view class="progress_box lf lf-between lf-center" v-if="dataGet.applyStudioProgressVos">
				<view class="xjs-weight-bold xjs-size-36">申请进度</view>
				<view @tap="progress(dataGet.info.id)">
					<text class="progress_text">{{filterProgressText(dataGet.applyStudioProgressVos[0]?.progressType)}}</text>
					<uni-icons type="right" color="#7C807F" size="12"></uni-icons>
				</view>
			</view> -->
			<view class="card_box" v-if="dataGet.info.status==1">
				<view class="card_title">
					<view class="card_title_icon"></view>
					<view class="card_title_text">收款信息</view>
				</view>
				<view class="card_main">
					<view class="card_main_item">
						<view class="card_main_item_label">收款银行</view>
						<view class="card_main_item_value">
							<text class="value_text">{{xjsAccount?.bank}}</text>
						</view>
					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">收款账号</view>
						<view class="card_main_item_value lf lf-between">
							<text class="value_text main_item_w280">{{xjsAccount?.accountNumber}}</text>
							<text @tap="copyBtn(xjsAccount.accountNumber)" class="copy_btn">复制</text>
						</view>
					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">收款账户</view>
						<view class="card_main_item_value lf lf-between">
							<text class="value_text">{{xjsAccount?.account}}</text>
							<text @tap="copyBtn(xjsAccount.account)" class="copy_btn">复制</text>
						</view>
					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">转款金额</view>
						<view class="card_main_item_value">
							<text class="value_text">{{xjsAccount?.money}}</text>
						</view>
					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">转款备注</view>
						<view class="card_main_item_value">
							<text class="value_text">{{xjsAccount?.remarks}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card_box">
				<view class="card_title">
					<view class="card_title_icon"></view>
					<view class="card_title_text">申请人信息</view>
				</view>
				<view class="card_main">
					<view class="card_main_item">
						<view class="card_main_item_label">昵称</view>
						<view class="card_main_item_value">
							<image class="userImg" :src="dataGet.info.user?.avatar" mode=""></image>
							<!-- <text class="name">{{dataGet.info.user?.realName}}</text> -->
							<text class="nickname">{{dataGet.info.user?.nickName}}</text>
						</view>
					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">手机号</view>
						<view class="card_main_item_value">
							<text class="value_text">{{dataGet.info.user?.phone}}</text>
						</view>
					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">ID</view>
						<view class="card_main_item_value">
							<text class="value_text">{{dataGet.info.user?.id}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card_box">
				<view class="card_title">
					<view class="card_title_icon"></view>
					<view class="card_title_text">申请工作室</view>
				</view>
				<view class="card_main">
					<view class="card_main_item">
						<view class="card_main_item_label">工作室名称</view>
						<view class="card_main_item_value">
							<image class="studioImg" :src="dataGet.info.studio?.avatar" mode=""></image>
							<text class="name">{{dataGet.info.studio?.name}}</text>
						</view>
					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">工作室地址</view>
						<view class="card_main_item_value">
							<text class="value_text value_text_line15">{{dataGet.info.studio?.province}}{{dataGet.info.studio?.city}}{{dataGet.info.studio?.area}}{{dataGet.info.studio?.address}}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card_box">
				<view class="card_title">
					<view class="card_title_icon"></view>
					<view class="card_title_text">认证信息</view>
				</view>
				<view class="card_main">
					<view class="card_main_item">
						<view class="card_main_item_label">基础信息</view>
						<view class="card_main_item_value">
							<text class="value_text">{{dataGet.info.realName}}｜{{dataGet.info.sex==0?'女':'男'}}｜{{dataGet.info.age}}岁</text>
						</view>
					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">联系电话</view>
						<view class="card_main_item_value">
							<text class="value_text value_text_line12">{{dataGet.info.phone}}
							</text>
						</view>
					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">联系微信</view>
						<view class="card_main_item_value">
							<text class="value_text value_text_line12">{{dataGet.info.wxNumber}}</text>
						</view>
					</view>
					<view v-if="dataGet.info.loginUserIdentity!=1">
						<view class="card_main_item">
							<view class="card_main_item_label">身份证号</view>
							<view class="card_main_item_value">
								<text class="value_text value_text_line12">{{dataGet.info.idCard}}
								</text>
							</view>
						</view>
						<view class="card_main_item" v-if="dataGet.idCardAvatar">
							<view class="card_main_item_label">手持证件照</view>
							<view class="card_main_item_value">
								<image class="idCard_img" @tap="preview(dataGet.idCardAvatar,index)" v-for="(item,index) in dataGet.idCardAvatar" :key="index" :src="item"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card_box">
				<view class="card_title">
					<view class="card_title_icon"></view>
					<view class="card_title_text">服务意向</view>
				</view>
				<view class="card_main">
					<view class="card_main_item">
						<view class="card_main_item_label">提供服务</view>
						<view class="card_main_item_value">
							<text class="value_text" v-if="dataGet.serviceType">
								<text v-for="(val,valIndex) in dataGet.serviceType" :key="valIndex">
									<text>{{filterPetService(val)}}</text>
									<text v-if="valIndex<dataGet.serviceType.length-1"> | </text>
								</text>
							</text>
						</view>
					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">接单地址</view>
						<view class="card_main_item_value">
							<text class="value_text value_text_line15">{{dataGet.info.province}}{{dataGet.info.city}}{{dataGet.info.area}}{{dataGet.info.locationAddress}}{{dataGet.info.address}}
							</text>
						</view>
					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">接单范围</view>
						<view class="card_main_item_value">
							<text class="value_text value_text_line15">{{dataGet.info.orderTakingRange}}KM
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card_box">
				<view class="card_title">
					<view class="card_title_icon"></view>
					<view class="card_title_text">养宠经历</view>
				</view>
				<view class="card_main">
					<view class="card_main_item">
						<view class="card_main_item_label">养宠时间</view>
						<view class="card_main_item_value">
							<text class="value_text">{{dataGet.info.experienceYear}}年</text>
						</view>
					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">陪宠经验</view>
						<view class="card_main_item_value">
							<text class="value_text value_text_line12">{{filterPetExperience(dataGet.info.experienceType)}}</text>
						</view>
					</view>
					<view class="card_main_item" v-if="dataGet.info.skill">
						<view class="card_main_item_label">经历&技能</view>
						<view class="card_main_item_value">
							<text class="value_text value_text_line12">{{dataGet.info.skill}}</text>
						</view>
					</view>
					<view class="card_main_item" v-if="dataGet.petRaisingPic.length>0">
						<view class="card_main_item_label">养宠图片</view>
						<view class="card_main_item_value">
							<view class="describeList1">
								<image @tap="preview(dataGet.petRaisingPic,index)" v-for="(item,index) in dataGet.petRaisingPic" :key="index" class="describe" :src="item"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card_box" v-if="dataGet.additionalRemark.length>0">
				<view class="card_title">
					<view class="card_title_icon"></view>
					<view class="card_title_text">补充说明</view>
				</view>
				<view class="card_main">
					<view class="describeList">
						<image @tap="preview(dataGet.additionalRemark,index)" v-for="(item,index) in dataGet.additionalRemark" :key="index" class="describe" :src="item"></image>
					</view>
				</view>
			</view>
			<view class="card_box">
				<view class="card_main card_main_bottom">
					<view class="card_main_item">
						<view class="card_main_item_label">编号</view>
						<view class="card_main_item_value">
							<text class="value_text">{{dataGet.info.id}} | <text @tap="copyBtn(dataGet.info.id)" class="copy_btn">复制</text></text>
						</view>

					</view>
					<view class="card_main_item">
						<view class="card_main_item_label">提交时间</view>
						<view class="card_main_item_value">
							<text class="value_text">{{dataGet.info.createTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_box" v-if="dataGet.info.status==1&&dataGet.info.user?.id==userInfo.id">
			<view class="lf xjs-ml-44 xjs-mr-44 xjs-mt-8">
				<view @tap="uploadPayment(dataGet.info.id)" class="xjs-btn-primary">上传打款截图</view>
			</view>
		</view>
		<view class="bottom_box" v-if="dataGet.info.status==0&&dataGet.info.loginUserIdentity==1">
			<view class="lf xjs-ml-44 xjs-mr-44 xjs-mt-8">
				<view @tap="refuse(dataGet.info.id)" class="xjs-btn-primary-plain xjs-mr-8">拒绝申请</view>
				<view @tap="agree" class="xjs-btn-primary">同意申请</view>
			</view>
		</view>
		<view class="bottom_box" v-if="(dataGet.info.status==1||dataGet.info.status==2||dataGet.info.status==4)&&dataGet.info.user?.id==userInfo.id">
			<view class="lf xjs-ml-44 xjs-mr-44 xjs-mt-8">
				<view v-if="dataGet.info.status==1" @tap="uploadPayment(dataGet.info.id)" class="xjs-btn-primary-plain xjs-mr-8">上传转款截图</view>
				<view v-if="dataGet.info.status==2||dataGet.info.applicationInfoReasonFlag==1" @tap="againBtn(dataGet.info.id)" class="xjs-btn-primary-plain xjs-mr-8">修改申请信息</view>
				<view v-if="dataGet.info.status==4&&dataGet.info.payInfoReasonFlag==1" @tap="uploadPayment(dataGet.info.id)" class="xjs-btn-primary">修改转款信息</view>
			</view>
		</view>
		<uni-popup ref="popupRef" type="center" :is-mask-click="false">
			<view class="unbind_pop">
				<view class="pop_title">确定同意陪宠师申请吗？</view>
				<!-- <view class="unbind_text linehei1">请确认是否已经培训。</view> -->
				<view class="pop_footer_btn">
					<view class="cancel_btn" @click="btnCancel()">取消</view>
					<view @click="handleConfig" class="xjs-btn-primary confirm_btn">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	import {useStudioStoreToRefs} from '@/store/useStudioStore'
	const {studio} = useStudioStoreToRefs()
	import { reactive ,ref } from 'vue'
	import { onLoad , onShow } from '@dcloudio/uni-app'
	import api from '@/api/index'
	let popupRef = ref()
	let xjsAccount = ref()
	const dataGet = reactive<{
		id:number | string
		info:{},
		reasonPic:[],
		additionalRemark:[],
		petRaisingPic:[],
		applyStudioProgressVos:{},
		idCardAvatar:[],
		serviceType:[],
		type:0
	}>({
		id:'',
		info:{},
		reasonPic:[],
		additionalRemark:[],
		petRaisingPic:[],
		applyStudioProgressVos:{},
		idCardAvatar:[],
		serviceType:[],
		type:0
		
	})
	 
	const uploadPayment = (id) => {
		uni.navigateTo({
			url: '/pages/myStudio/studio/offlinePayment/index?id='+id
		})
	}
	// const modifyBtn = (id) => {
	// 	uni.navigateTo({
	// 		url: '/pages/payment/uploadBargainInfo/index?id='+id
	// 	})
	// }
	const refuse = (id) => {
		uni.navigateTo({
			url: '/pages/myStudio/studio/refuse/index?id='+id
		})
	}
	const progress = (id) => {
		uni.navigateTo({
			url: `/pages/myStudio/studio/applicationStatus/index?applyId=${id}`
		})
	}
	const againBtn = (id) => {
		uni.navigateTo({
			url: `/pages/applyPetTeacher/submitInfo/submitInfo?recordId=${id}`
		})
	}
	const preview = (imgUrl,index) => {
		uni.previewImage({
			current: index,
			urls: imgUrl,
		});
	}
	const copyBtn = (text)=>{
		uni.setClipboardData({
			data: text,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		});
	}
	const filterStatusText = (status) => {
		if(status == 0){
			return '待初审'
		}else if(status == 1){
			return '待缴纳'
		}else if(status == 3){
			return '终审通过'
		}else if(status == 2){
			return '初审拒绝'
		}else if(status == 4){
			return '终审拒绝'
		}else if(status == 5){
			return '待终审'
		}
	}
	const filterTopText = (status) => {
		if(status == 0){
			return '请及时审核陪宠师申请'
		}else if(status == 1){
			return '等待用户上传打款截图'
		}else if(status == 3){
			return '该用户成功成为您工作室的陪宠师'
		}else if(status == 5){
			return '请耐心等待平台最终的审核'
		}
	}
	const filterTopText1 = (status) => {
		if(status == 0){
			return '请耐心等候审核，若被拒绝，您可以修改后重新提交'
		}else if(status == 1){
			return '陪宠师入驻申请初审通过'
		}else if(status == 3){
			return `恭喜您，成功成为${dataGet.info.studio.name}的陪宠师`
		}else if(status == 2||status == 4){
			return '您可以修改后重新提交'
		}else if(status == 5){
			return '您上传了转款截图'
		}
	}
	const filterTopText2 = (status) => {
		if(status == 1){
			return '请上传转款截图'
		}else if(status == 5){
			return '请耐心等候审核，若被拒绝，您可以修改后重新提交'
			
		}
	}
	const filterProgressText = (type) => {
		if(type == 0){
			return '用户提交陪宠师开通申请'
		}else if(type == 1){
			return '店长初审通过'
		}else if(type == 2){
			return '店长初审拒绝'
		}else if(type == 3){
			return '平台终审通过'
		}else if(type == 4){
			return '平台终审不同意陪宠师开通申请'
		}
	}
	const filterPetExperience = (type) => {
		if(type == 0){
			return '现在养宠、有上门服务经验'
		}else if(type == 1){
			return '现在养宠、无上门服务经验'
		}else if(type == 2){
			return '曾经养宠、有上门服务经验'
		}else if(type == 3){
			return '曾经养宠、无上门服务经验'
		}
	}
	const filterPetService = (type) => {
		if(type == 1){
			return '上门喂养'
		}else if(type == 2){
			return '上门遛狗'
		}else if(type == 3){
			return '基础清洁'
		}
	}
	const agree = ()=>{
		popupRef.value.open()
	}
	const btnCancel = () => {
		popupRef.value.close()
	}
	const handleConfig = async () => {
		const res : any = await api({
			method: 'post',
			url: `/mall/studio/apply-studio-record/InitialAuditSuccess`,
			data:{
				recordId:dataGet.id
			}
		})
		popupRef.value.close()
		if(res.code=='0'){
			uni.showToast({
				title: '审核成功',
				icon: 'none'
			})
			onDataGet()
		}else{
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	const xjsAccountNumber = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/content/backend-configs/xjsPetAccountNumber`,
		})
		xjsAccount.value = res.data
	}
	// 获取数据
	const onDataGet = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/apply-studio-record/getApplyInfo/${dataGet.id}`
		})
		dataGet.info = res.data
		dataGet.reasonPic = res.data.reasonPic?res.data.reasonPic.split(','):[],
		dataGet.additionalRemark = res.data.additionalRemark?res.data.additionalRemark.split(','):[],
		dataGet.petRaisingPic = res.data.petRaisingPic?res.data.petRaisingPic.split(','):[],
		dataGet.applyStudioProgressVos = res.data.applyStudioProgressVos[0]
		dataGet.idCardAvatar = res.data.idCardAvatar?res.data.idCardAvatar.split(','):[]
		dataGet.serviceType = res.data.serviceType?res.data.serviceType.split(','):[]
	}
	onLoad((data) => {
		dataGet.id = data.id
		dataGet.type = data.type||0
	})
	onShow(()=>{
		xjsAccountNumber()
		onDataGet()
	})
</script>

<style lang="scss" scoped>
	.text-word{
		word-break:break-all;
		word-wrap:break-word; 
	}
	.lf {
		display: flex;
	}
	.lf-between {
		justify-content: space-between;
	}
	.lf-center{
		align-items: center;
	}
	.container {
		min-height: 100%;
		box-sizing: border-box;
		background-color: #F9F6F6;
		padding-bottom:calc(104rpx + var(--safe-area-bottom));;
	}
	.main_item_w280{
		display: block;
		word-wrap: break-word;
		width: 370rpx;
	}
	.header {
		box-sizing: border-box;
		padding: 48rpx 32rpx 90rpx 32rpx;
		background: linear-gradient(180deg, #FF7D9E 18%, #FFB796 100%);
		border-radius: 0px 0px 20px 20px;
		color: #fff;
		line-height: 1;

		.header_title {
			margin-bottom: 16rpx;
			font-size: 40rpx;
			font-weight: bold;
		}

		.header_tips {
			font-size: 26rpx;
		}
		.header_img_list{
			display: flex;
			flex-wrap: wrap;
			margin-top: 16rpx;
		}
		.header_img{
			width: 160rpx;
			height: 213rpx;
			margin-right: 15rpx;
			margin-top: 16rpx;
		}
		.header_img:nth-child(4n){
			margin-right: 0rpx;
		}
	}
	.describeList1{
		display: flex;
		flex-wrap: wrap;
		.describe{
			width: 160rpx;
			height: 213rpx;
			margin-right: 16rpx;
			margin-top: 16rpx;
		}
	}
	.describeList{
		display: flex;
		flex-wrap: wrap;
		padding: 24rpx 0 40rpx 0;
		.describe{
			width: 160rpx;
			height: 213rpx;
			margin-right: 16rpx;
			margin-top: 16rpx;
		}
	}
	.bottom_box{
		width: 100%;
		height: 104rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding-bottom: calc(var(--safe-area-bottom));
	}
	.content {
		margin-top: -48rpx;
		.progress_box{
			width: 686rpx;
			margin: 0 auto;
			margin-bottom: 24rpx;
			padding: 40rpx 32rpx;
			background-color: #fff;
			border-radius: 24rpx;
			box-sizing: border-box;
		}
		.idCard_img{
			width: 240rpx;
			height: 152rpx;
		}
		.progress_text{
			font-size: 26rpx;
			color: #7C807F;
		}
		.card_box {
			width: 686rpx;
			margin: 0 auto;
			margin-bottom: 24rpx;
			padding: 40rpx 32rpx 0 32rpx;
			background-color: #fff;
			border-radius: 24rpx;
			box-sizing: border-box;

			.card_title {
				padding-bottom: 32rpx;
				display: flex;
				align-items: center;
				line-height: 1;
				border-bottom: 1rpx solid #E4E6E6;

				.card_title_icon {
					margin-right: 16rpx;
					width: 8rpx;
					height: 32rpx;
					background-color: #FF6084;
					border-radius: 4rpx;
				}

				.card_title_text {
					font-size: 36rpx;
					color: #1B2120;
					font-weight: bold;
				}
			}


			.card_main {

				.card_main_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 1;

					.card_main_item_label {
						width: 132rpx;
						font-size: 26rpx;
						color: #5C5E5E;
						font-weight: bold;
					}

					.card_main_item_value {
						padding: 40rpx 0;
						padding-left: 10rpx;
						width: 468rpx;
						color: #1B2120;
						display: flex;
						align-items: center;
						box-sizing: border-box;
						border-bottom: 2rpx solid #E4E6E6;
						
						.userImg {
							margin-right: 16rpx;
							width: 64rpx;
							height: 64rpx;
							border-radius: 50%;
							border: 2rpx solid #E4E6E6;
						}

						.studioImg {
							margin-right: 16rpx;
							width: 64rpx;
							height: 64rpx;
							border-radius:16rpx;
							border: 2rpx solid #E4E6E6;
						}

						.name {
							font-size: 26rpx;
						}

						.nickname {
							width: 365rpx;
							font-size: 24rpx;
							
						}

						.value_text {
							font-size: 30rpx;
						}
						.value_text_line15{
							line-height: 1.5;
						}
						.value_text_line12 {
							line-height: 1.2;
						}
						.copy_btn{
							color: #FF6084;
							text-decoration: underline;
						}
					}
				}

				.card_main_item:last-child .card_main_item_value {
					border: none;
				}
			}
			.card_main_bottom {
				.card_main_item {
					justify-content: space-between;
					padding-bottom: 40rpx;
					.card_main_item_value {
						border: none;
						flex-direction: row-reverse;
						padding: 0;
						
					}
				}
			}
		}
		
	}
	.unbind_pop {
		width: 622rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 64rpx 40rpx;
		box-sizing: border-box;
		text-align: center;
	
		.pop_title {
			font-weight: 500;
			font-size: 40rpx;
			color: #1B2120;
	
		}
	
		.unbind_text {
			margin-top: 48rpx;
			font-size: 30rpx;
			color: #1B2120;
		}
		.pop_footer_btn {
			display: flex;
			justify-content: space-between;
			margin-top: 48rpx;
	
			.cancel_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 263rpx;
				height: 88rpx;
				background-color: #FFFFFF;
				border-radius: 44rpx;
				border: 2rpx solid #FF6084;
				font-weight: 400;
				font-size: 28rpx;
				color: #FF6084;
	
			}
	
			.confirm_btn {
				width: 263rpx;
				height: 88rpx;
			}
		}
	}
</style>